<template>
    <div>
        <img src="@/images/bar.png" alt="bar">
        <el-card class="register-box-card">
            <div slot="header" class="clearfix">
                <span style="float: left;">注册</span>
                <el-button class="el-icon-close" style="float: right; padding: 3px 0" type="text"
                           @click="backBeforePage"></el-button>
            </div>
            <el-form
                :rules="rules" ref="register" :model="registerInfo" label-width="80px" label-position="left">
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="registerInfo.nickname" placeholder="不可与已有昵称重复"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="account">
                    <el-input v-model="registerInfo.account" placeholder="请填写Email地址"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="registerInfo.password" placeholder="6-18个字符组成，区分大小写" show-password></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="authCode">
                    <el-input v-model="registerInfo.authCode" placeholder="请输入验证码"
                              @keyup.enter.native="register"></el-input>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-button style="float: left;margin-left: 80px;" type="primary"
                               @click="getAuthCode(registerInfo.account)">
                        点击发送验证码
                    </el-button>
                    <el-button style="float: right;margin-right: 80px;" type="primary" @click="register">注册
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'

    export default {
        name: 'Register',
        data () {
            return {
                registerInfo: {
                    nickname: '',
                    account: '',
                    password: '',
                    authCode: ''
                },
                rules: {
                    nickname: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                        { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
                    ],
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { type: 'email', message: '账号格式错误，请填写Email地址', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', message: '密码格式错误', trigger: 'blur' },
                        { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                    ],
                    authCode: [
                        { required: true, message: '验证码不可为空', trigger: 'blur' },
                        { len: 6, message: '验证码长度为6', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            ...mapActions('user', {
                sendAuthCodeAction: 'sendAuthCode',
                registerAction: 'register',
            }),
            backBeforePage () {
                this.$router.go(-1)
            },
            getAuthCode (email) {
                this.$refs['register'].validateField('account', message => {
                    if (!message) {
                        this.action(this.sendAuthCodeAction(email), data => {
                            this.$message({
                                message: '邮箱验证成功，请注意查收验证码',
                                type: 'success'
                            })
                        })
                    }
                })
            },
            register () {
                this.$refs['register'].validate((valid) => {
                        if (valid) {
                            this.action(this.registerAction(this.registerInfo), data => {
                                this.$router.push({
                                    path: '/login', query: { register: true }
                                })
                            })
                        } else {
                            return false
                        }
                    }
                )
            }
        }
    }
</script>

<style lang="scss" scoped>
    img {
        margin: 0 0;
        width: 100%;
        height: 150px;
    }

    .clearfix {
        font-size: 24px;
        font-weight: bolder;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .el-icon-close {
        font-size: 24px;
    }

    .register-box-card {
        width: 600px;
        margin: 60px auto;
        position: page;
    }
</style>
